@import "~@/public-style.less";
// @import "~@assets/iconfont/font_h7ptsgnu64r/iconfont.css";
.home-container{
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    .home-images{
        position:absolute;
        width: 100%;
        height: 100%;
        transition: all 1.5s;
        .list-img-container{
            position: relative;
            width: 100%;
            height: 100%;
            img{
                width: 100%;
                height: 100%;
            }
            &>div{
                position: absolute;
                left: 15%;
                bottom: 100px;
                color:@White-theme-font-color;
                span{
                    font-size: 30px;
                }
                p{
                    font-size: 24px;
                }
            }
        }
    }
    .Indicator{
        position: absolute;
        right: 2%;
        top:50%;
        width: 20px;
        height: 60px;
        transform: translateY(-50%);
        li{
            width: 7px;
            height: 7px;
            border:1px solid @White-theme-font-color;
            border-radius: 50%;
            margin-top: 5px;
            box-shadow: 1px 0px 0px rgba(0,0,0,.1),-1px 0px 0px rgba(0,0,0,.1),
            0px 1px 0px rgba(0,0,0,.1),0px -1px 0px rgba(0,0,0,.1);
            &.active{
                background-color: @White-theme-font-color;
            }
        }
    }
    // 向上 向下按钮
    .icon{
        position: absolute;
        width: 80px;
        height: 60px;
        color:@White-theme-font-color;
        opacity: .5;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        &.up{
            bottom: 60px;
            span{
               font-size: 50px;
               .conspicuous-font();
                animation: jump-up 2s infinite;
            }
        }
        &.down{
            bottom: 20px;
            span{
                font-size: 50px;
                .conspicuous-font();
                animation: jump-down 2s infinite;
            }
        }
    }
}
@keyframes jump-up{
    0%{
        transform: translateY(5px);
    }
    50%{
        transform: translateY(-5px);
    }
    100%{
        transform: translateY(5px);
    }
}
@keyframes jump-down{
    0%{
        transform: translateY(-5px);
    }
    50%{
        transform: translateY(5px);
    }
    100%{
        transform: translateY(-5px);
    }
}